<template>
	<view class="all_body">
	   <view class="head_friendname">
		  我的好友: {{friendname}}
	   </view>
		<view class="body_container">     
				   <view v-for="(item,index) in myValArray" :key="index" class="container_left" v-if="">
					   <view class="myself" v-if="item.id==1" >
					   		<view class="myself_image"> <image src="../../static/image/cat.jpeg" mode=""></image></view>
					   		<view class="myself_text">{{item.msg}}</view>
					   </view>
					 <!--  <view class="timer">{{item.username}}{{item.time}}</view> -->
				  
				   
				   
				   <!-- --------------------------------------- -->
				   
				
				   					   <view class="friend" v-if="item.id==2" >
										   	<view class="friend_text">{{item.msg}}</view>
				   					   		<view class="friend_image"> <image src="../../static/image/cat1.jpeg" mode="" @click="toFriendDetail()"></image></view>
				   					   	
				   					   </view>
				   		<!-- 			   <view class="Friendtimer">{{item.username}}{{item.time}}</view> -->
						
						<view :class="item.id==1?'other_item_myself':'other_item_friend'"  >{{item.id==1?username:friendname}} {{item.time}}  </view>
				 </view>
				   
				   
		
		</view>
		<view class="boody_footer">
			<view class="footer_input">
				<view class="footer_input_main"><input type="text" value=""v-model="inputValue"  confirm-type="search" @confirm="search()" />
			
				</view>
				<view class="footer_input_other">+</view>
			</view>
		</view>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	</view>
	
</template>

<script>
	export default {
		data(){
			return {
				username:'',
				friendname:'',
				inputValue:'',
				myValArray:[],
			
				
			}
		},
		methods:{
           search(){
			   if(this.inputValue.length>0){
				   let msg = {msg:this.inputValue,id:1,time:this.newDate()}
				   let data = {msg:this.inputValue,id:2,time:this.newDate()}
				   this.socket.emit('message',data)
				   this.myValArray.push(msg)
				   this.inputValue = ''
			   }
		   },
			receive(){
				let that = this
				this.socket.on('gb',(data)=>{
					console.log(data)
					that.myValArray.push(data)
				})
				
			},
			
			newDate(){
				var now = new Date()
				var hours =now.getHours()
				var minutes = now.getMinutes()
				var second = now.getSeconds()
				if(hours<10){
					hours="0"+hours
				}
				if(minutes<10){
					minutes='0'+minutes
				}
				if(second<10){
					second = '0'+second
				}
				return hours+":"+minutes				
			},
			toFriendDetail(){
				console.log(this.friendname)
			    uni.navigateTo({
			    	url:"./friendNote?friendname="+this.friendname
			    })
				
				
				
				
				
				
			}
		
			
			
					   
		},
		
		
		
		
		onLoad(e) {
			let that = this
			that.friendname = e.friend
			that.username = uni.getStorageSync("user")[0].us
			this.receive()
			// this.newDate()
		},
		onPullDownRefresh() {
			let chatText = uni.getStorageSync("chatText")
			 this.myValArray = chatText
			   uni.stopPullDownRefresh();
		},
		watch:{
			myValArray:{
				handler(newVal,oldVal){
					console.log(newVal)
					if(newVal.length!==0){
						uni.setStorage({
							key:"chatText",
							data:newVal
						})
					}
				},
				immediate:true,
				deep:true
			}
		},
		computed:{
			
		}
		
		
		
		
		
		
		
		
		
		
		
		
	}
</script>

<style lang="less">
	.all_body{
		box-sizing: border-box;
		padding: 0;
		margin: 0;
	}
	.head_friendname{
		width: 100%;
		height: 70rpx;
		background: #00c4ff99;
		text-align: center;
		line-height: 70rpx;
		color: #fff;
	}
	.body_container{
		width: 100%;
		height: 86vh;
		background: rgb(251, 244, 245);
		margin-bottom: 20rpx;

		.container_left{
			position: relative;
			.myself{
					width: 100%;
					// background: purple;
					display: flex;
					// justify-content: center;
					align-items: center;
					.myself_image{
						margin: 30rpx;
						image{
							width:80rpx;
							height: 80rpx;
							border-radius: 100%;
						}
					}
					.myself_text{
						display: flex;
						background: rgb(255, 255, 255);
						padding: 15rpx;
						border-radius: 0 20rpx 20rpx 20rpx;
						flex-wrap: wrap;
						color: rgb(255, 84, 118);
					}
					
				}
			
			
				
				.friend{
					width: 100%;
					// background: purple;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					.friend_image{
						margin: 30rpx;
						image{
							width:80rpx;
							height: 80rpx;
							border-radius: 100%;
						}
					}
					.friend_text{
						display: flex;
						background: rgb(18, 183, 245);
						padding: 15rpx;
						border-radius: 20rpx 0 20rpx 20rpx;
						flex-wrap: wrap;
						color: #fff;
					}
			}
			
			.other_item_myself{
				position: absolute;
				top: 120rpx;
				left: 140rpx;
				font-size: 20rpx;
			}
			.other_item_friend{
				position: absolute;
				top: 120rpx;
				right: 140rpx;
				font-size: 20rpx;
			}
		}
		
	}
	.boody_footer{
		z-index: 100;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background: #fff;
		display: flex;
	    align-items: center;
		.footer_input{
			// background: #fff;
			width: 100%;
			display: flex;
			align-items: center;
			height: 70%;
		    justify-content: space-evenly;
			.footer_input_main{
				
				width: 80%;
				height: 100%;
				box-sizing: border-box;
				padding-left: 0rpx;
				border: 1rpx solid black;
				border-radius: 50rpx;
			     display: flex;
			     justify-content: center;
			     align-items: center;
				 padding-left: 20rpx;
				input{
					width: 100%;
				
				}
			}
			.footer_input_other{
				display: flex;
				width: 50rpx;
				height: 50rpx;
				font-size: 50rpx;
				justify-content: center;
				align-items: center;
				border-radius: 100%;
				border: 1rpx solid black;
				// background: pink;
			}
		}
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
</style>
